<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import moment from 'moment';
import { useAppStore } from '@/store/modules/app';
import { REQUEST } from '@/api/request';
import HeaderBanner from './modules/header-banner.vue';
import LineChart from './modules/line-chart.vue';
import PieChart from './modules/pie-chart.vue';
import SearchVue from './modules/search.vue';
const appStore = useAppStore();
const loading = ref(false);
const gap = computed(() => (appStore.isMobile ? 0 : 16));
const queryForm: any = ref({
  startTime: '',
  endTime: ''
});
const year = ref('');
const month = ref('');
const orderList: any = ref([]);
const shopping: any = ref([]);
const dataNumber: any = ref([]);
const search = (datas: any) => {
  console.log(datas.name.date, 'datas');

  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getDate(datas.name.date.substring(0, 4), datas.name.date.substring(5, 8));
  year.value = datas.name.date.substring(0, 4);
  month.value = datas.name.date.substring(5, 8);
};
const getDate = (years: number, months: number) => {
  queryForm.value.endTime = moment(new Date(years, months - 1))
    .endOf('month')
    .format('YYYY-MM-DD');
  queryForm.value.startTime = moment(new Date(years, months - 1))
    .startOf('month')
    .format('YYYY-MM-DD');

  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getData();
};
onMounted(() => {
  year.value = moment().format('YYYY');
  month.value = moment().format('MM');
  getDate(year.value, month.value);
});
const getData = () => {
  loading.value = true;
  REQUEST.POST('HOME', {
    startTime: queryForm.value.startTime,
    endTime: queryForm.value.endTime
  }).then((res: any) => {
    dataNumber.value = [];
    loading.value = false;
    orderList.value = res.data.order;
    shopping.value = res.data.product;
    const lastDay: string = queryForm.value.endTime.substring(8, 11);
    // eslint-disable-next-line no-plusplus
    for (let i = 1; i <= JSON.parse(lastDay); i++) {
      let strings: string = '';
      if (i < 10) {
        strings = `${year.value}-${month.value}-0${i}`;
      } else {
        strings = `${year.value}-${month.value}-${i}`;
      }
      const objs: any = {
        days: strings,
        num: 0
      };

      dataNumber.value.push(objs);
    }
    // eslint-disable-next-line array-callback-return
    dataNumber.value.map((item: any) => {
      if (orderList.value && orderList.value.length > 0) {
        // eslint-disable-next-line array-callback-return
        orderList.value.map((li: any) => {
          if (item.days === li.days) {
            item.num = li.num;
          }
        });
      }
    });
    console.log('0123', dataNumber.value);
  });
};
</script>

<template>
  <NSpace vertical :size="16">
    <HeaderBanner />
    <!-- <CardData /> -->
    <NCard><SearchVue @search="search"></SearchVue></NCard>
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <NCard :bordered="false" class="card-wrapper">
          <LineChart :order-list="dataNumber" />
        </NCard>
      </NGi>
      <NGi span="24 s:24 m:10">
        <NCard :bordered="false" class="card-wrapper">
          <PieChart :query-form="queryForm" :shopping="shopping" />
        </NCard>
      </NGi>
    </NGrid>
  </NSpace>
</template>

<style scoped></style>
